<template>
  <div class="pyBox">
    <div class="topBox">
      <p>基本信息</p>
      <a-icon
        type="close"
        @click="onClose"
        :style="{ fontSize: '16px', color: '#000', float: 'right', margin: '10px' }"
      />
    </div>
    <div class="pyconBox">
      <a-row style="margin-bottom:10px;">
        <a-col :span="8">
          <span>手机：</span><span>{{ infoObj.baseInfo ? infoObj.baseInfo.phoneNumber : '' }}</span>
        </a-col>
        <a-col :span="8">
          <span>姓名/代号：</span><span>{{ infoObj.baseInfo ? infoObj.baseInfo.userName : '' }}</span>
        </a-col>
        <a-col :span="8">
          <span>归属地：</span><span>{{ latestLocation }}</span>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <span>查询时间段：</span
          ><span>{{
            infoObj.baseInfo && infoObj.baseInfo.rangePickerTime.length > 0
              ? infoObj.baseInfo.rangePickerTime[0] + '~' + infoObj.baseInfo.rangePickerTime[1]
              : ''
          }}</span>
        </a-col>
      </a-row>
    </div>

    <div class="py-table">
      <z-table
        ref="table"
        :showAlert="false"
        :columns="columns"
        :dataSource="pageData"
        :showSelection="false"
        :showPagination="true"
        @selectedRow="onSelectedRow"
        rowKey="key"
        :loading="listLoading"
        @change="onTableChange"
        :scroll="{ y: 550 }"
      >
        <template slot="duration" slot-scope="text">
          {{ formatSeconds(text) }}
        </template>
      </z-table>
    </div>
  </div>
</template>

<script>
// import { skpz } from '@/api'
// import CustomTable from '@/components/zxd/Table/CustomTable'
// import * as api from '@/api/wxSmuggle/eventModel.js'
export default {
  // props: ['visible'],
  // components: {
  //   CustomTable
  // },
  data() {
    return {
      taskId: this.$route.query.taskId,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {
        current: 1, //当前页
        records: [],
        pages: 1, //页数
        size: 10, //一页10条
        total: 0 //总条数
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 80,
          scopedSlots: { customRender: 'order' },
          customRender: (text, record, index) => `${(this.pageData.pages - 1) * 10 + (index + 1)}` //序号分页后连续
        },
        {
          title: '到达时间',
          dataIndex: 'appeartime',
          width: 160,
          scopedSlots: { customRender: 'appeartime' }
        },
        {
          title: '停留时间',
          dataIndex: 'duration',
          width: 100,
          scopedSlots: { customRender: 'duration' }
        },
        {
          title: '位置描述',
          dataIndex: 'address',
          // width: 100,
          scopedSlots: { customRender: 'address' }
          //  customRender: (t) => (<j-ellipsis value={t} length={15}/>)
        }
      ],
      selectRows: [],
      isDisabled: true,
      infoObj: {},
      listLoading: false,
      totalData: [],
      latestLocation: ''
    }
  },
  mounted() {},
  methods: {
    getData(row, detail) {
      this.id = row.id
      this.infoObj.baseInfo = row
      this.infoObj.detailList = detail
      this.getInfo(row.phoneNumber)
      this.getDetail()
    },
    getInfo(phoneNumber) {
      api
        .getPhoneInfo({ phone: phoneNumber })
        .then(res => {
          if (res.success) {
            let result = res.result
            this.latestLocation = result.provName + result.cityName
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getDetail() {
      if (this.infoObj.detailList != null && this.infoObj.detailList.length > 0) {
        this.pageData = {
          current: 1, //当前页
          records: [],
          pages: 1, //页数
          size: 10, //一页10条
          total: this.infoObj.detailList.length //总条数
        }
        this.totalData = []
        this.infoObj.detailList.forEach((item, index) => {
          this.totalData.push({
            key: index,
            phone: item.phone,
            duration: item.duration,
            appeartime: item.appeartime,
            longitude: item.longitude,
            latitude: item.latitude,
            address: item.address
          })
          this.pageData.records.push({
            key: index,
            phone: item.phone,
            duration: item.duration,
            appeartime: item.appeartime,
            longitude: item.longitude,
            latitude: item.latitude,
            address: item.address
          })
        })
      } else {
        this.pageData = {
          current: 1, //当前页
          records: [],
          pages: 1, //页数
          size: 10, //一页10条
          total: 0 //总条数
        }
      }
    },

    onSelectedRow(rows) {
      this.selectRows = rows
      this.isDisabled = rows.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      // console.log('paginations')
      // console.log(paginations)
      // this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      // this.refreshTable()
      //假分页
      this.pageData = {
        current: paginations.pageNo, //当前页
        records: this.totalData,
        pages: paginations.pageNo, //页数
        size: 10, //一页10条
        total: this.totalData.length //总条数
      }
    },
    onClose(value) {
      this.$emit('close', value)
    },

    formatSeconds(value) {
      var second = parseInt(value) // 秒
      var min = 0 // 分
      var hour = 0 // 小时
      if (second > 60) {
        min = parseInt(second / 60)
        second = parseInt(second % 60)
        if (min > 60) {
          hour = parseInt(min / 60)
          min = parseInt(min % 60)
        }
      }
      var result = '' + parseInt(second) + 'ss'
      if (min > 0) {
        result = '' + parseInt(min) + 'min' + result
      }
      if (hour > 0) {
        result = '' + parseInt(hour) + 'H' + result
      }
      return result
    }
  }
}
</script>

<style lang="less">
.ctr-row-table label.ant-checkbox-wrapper.ant-checkbox-wrapper-disabled {
  display: none;
}
.tw-container {
  display: inline-block;
  margin-left: 50px;
  color: #ffffff;
  .twBlock {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    margin-top: 5px;
    float: right;
  }
}
.pyBox {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-color: #fff;
  // background: rgba(255, 255, 255, 0.9);
  width: 550px;
  .topBox {
    background-color: #f2f2f2 !important;
    overflow: hidden;
    p {
      float: left;
      color: #000;
      padding: 15px 10px 0;
      font-weight: 500;
      font-size: 16px;
      // line-height: 22px;
    }
    /deep/.anticon {
      float: right;
      margin: 10px;
    }
  }
  .pyconBox {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    span {
      color: #000;
    }
  }
  .add-box {
    position: absolute;
    right: 10px;
    top: 100px;
  }
  .search-box {
    margin-top: 20px;
    .total {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      color: #000;
      font-size: 14px;
      span {
        color: #ef5140;
      }
    }
  }
}
.editable-row-operations {
  a {
    color: #108de9;
  }
}
// .py_list_drawer tr:hover > td {
//   cursor: !important;
// }
// .py-table .spanBtn {
//   width: 100%;
//   display: inline-block;
//   cursor: pointer;
// }
</style>
